<template>
	<view id="openlayers-container">
		
	</view>
</template>

<script>
</script>

<script module="OpenLayers" lang="renderjs">
	import Map from 'ol/Map';
	import View from 'ol/View';
	import TileLayer from 'ol/layer/Tile';
	import XYZ from 'ol/source/XYZ';
	
	export default {
		mounted() {
			
			new Map({
			  target: 'openlayers-container',
			  layers: [
			    new TileLayer({
			      source: new XYZ({
			        url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
			      })
			    })
			  ],
			  view: new View({
			    center: [0, 0],
			    zoom: 2
			  })
			});
		}
	}
</script>

<style>
	#openlayers-container {
		width: 100%;
		height: 100%;
	}
</style>